<template>
  <div class="hello">
    <div class="fa">
      <div class="options">
        <div id="widthClick" class="optionClick" ref="strokeWidthRef" @click="strokeWidthClick()">
          <div>
            <img class="optionsImg" src="../../assets/images/drawing/画笔宽度 未选中.png" />
          </div>
          <div class="optionsTxt">画笔宽度</div>
        </div>
        <div class="optionClick" ref="strokeColorRef" @click="strokeColorClick()">
          <div>
            <img class="optionsImg" src="../../assets/images/drawing/画笔颜色未选中.png" />
          </div>
          <div class="optionsTxt">画笔颜色</div>
        </div>
        <div id="eraser" class="optionClick" ref="strokeEolorRef" @click="strokeEraserClick()">
          <div>
            <img class="optionsImg" src="../../assets/images/drawing/橡皮擦 未选中.png" />
          </div>
          <div class="optionsTxt">橡皮擦</div>
        </div>
        <div class="optionClick" @click="isClick && saveImg()">
          <div id="saveImg">
            <img class="optionsImg" src="../../assets/images/drawing/保存 未选中.png" />
          </div>
          <div class="optionsTxt">保存图片</div>
        </div>
      </div>
      <div class="canvasFather" style="width:320px;height:400px;">
        <div id="clear">
          <div>
            <img style="margin-top:5px;" src="../../assets/images/drawing/3 清除画布.png" width="10px" />
          </div>
          <div style="margin-left:7px;margin-top:3px;">清除画布</div>
        </div>
        <div class="strokeWidth" ref="strokeWRef">
          <div class="strokeWidthIcon1">
            <img
              width="20px"
              style="margin-bottom:20px"
              id="fonterImg1"
              src="../../assets/images/drawing/画笔宽度1.png"
            />
          </div>
          <div class="strokeWidthIcon2" id="fonter">
            <img width="10px" src="../../assets/images/drawing/画笔宽度2.png" />
            <img width="15px" src="../../assets/images/drawing/画笔宽度3.png" class="grea" />
            <img width="20px" src="../../assets/images/drawing/画笔宽度4.png" />
          </div>
        </div>
        <div class="strokeColor" ref="strokeCRef">
          <div id="color" class="font">
            <input
              type="color"
              name="color"
              id="color"
              @change="changeColor()"
              style="width:20px;height:30px;"
            />
            <input class="i1" type="button" value />
            <input class="i2" type="button" value />
            <input class="i3" type="button" value />
            <input class="i4" type="button" value />
            <input class="i5" type="button" value />
            <input class="i6" type="button" value />
            <input class="i7" type="button" value />
            <input class="i8" type="button" value />
            <input class="i9" type="button" value />
          </div>
        </div>
        <div class="strokeEraser" ref="strokeERef">
          <div class="strokeEraserIcon1">
            <img
              width="20px"
              style="margin-bottom:20px"
              id="fonterImg1"
              src="../../assets/images/drawing/橡皮擦1.png"
            />
          </div>
          <div class="strokeEraserIcon2" id="fonterEraser">
            <img width="10px" src="../../assets/images/drawing/画笔宽度2.png" />
            <img width="15px" src="../../assets/images/drawing/画笔宽度3.png" class="grea" />
            <img width="20px" src="../../assets/images/drawing/画笔宽度4.png" />
          </div>
        </div>

        <canvas id="canvas" width="280" height="365">您的浏览器不支持 canvas 标签</canvas>
      </div>
    </div>
    <fireComponents ref="childName" :fatherImgSrc="fatherImgSrc"></fireComponents>
  </div>
</template>

<script>
import { method } from '../../assets/js/alert'
import { method2, changeColors } from '../../assets/js/alert2'
import fireComponents from '@/components/newComp/fireComponents'
export default {
  name: 'browseImg',
  data () {
    return {
      fatherImgSrc: '',
      isClick: true
    }
  },
  created: function () {
    // eslint-disable-next-line no-undef
    $(function () {
      method()
    })
    // eslint-disable-next-line no-undef
    $(function () {
      method2()
    })
  },
  components: {
    fireComponents
  },
  methods: {
    changeColor () {
      // eslint-disable-next-line no-undef
      $(function () {
        changeColors()
      })
    },
    strokeWidthClick () {
      // console.log('strokeWidthClick')
      this.$refs.strokeWRef.style.display = 'block'
      this.$refs.strokeCRef.style.display = 'none'
      this.$refs.strokeERef.style.display = 'none'
    },
    strokeColorClick () {
      // console.log('strokeColorClick')
      this.$refs.strokeWRef.style.display = 'none'
      this.$refs.strokeCRef.style.display = 'block'
      this.$refs.strokeERef.style.display = 'none'
    },
    strokeEraserClick () {
      // console.log('strokeEraserClick')
      this.$refs.strokeWRef.style.display = 'none'
      this.$refs.strokeCRef.style.display = 'none'
      this.$refs.strokeERef.style.display = 'block'
    },
    saveImg () {
      this.isClick = false
      var that = this
      var shield = document.getElementById('canvas')
      var imgs = shield.toDataURL('image/png')
      this.fatherImgSrc = imgs
      // eslint-disable-next-line no-undef
      $.ajax({
        url: 'api/savepicture.php',
        type: 'post',
        data: { img: imgs },
        success: function (data) {
          that.timerName = setInterval(() => {
            that.$refs.childName.init()
            window.clearInterval(that.timerName)
            that.timerName = null
            that.isClick = true
          }, 100)
        },
        error: function (data) {
          alert('图片保存失败')
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fa {
  width: 750px;
  background-color: #f5f5f5;
  margin: 0 auto;
}
.top {
  margin: 10px 0;
}
.strokeColor input {
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 2px;
  background: #ddd;
}
.strokeColor .i1 {
  background: #eeaaee;
}
.strokeColor .i2 {
  background: #ff0000;
}
.strokeColor .i3 {
  background: #80ff00;
}
.strokeColor .i4 {
  background: #00ffff;
}
.strokeColor .i5 {
  background: #808080;
}
.strokeColor .i6 {
  background: #ff8000;
}
.strokeColor .i7 {
  background: #408080;
}
.strokeColor .i8 {
  background: #8000ff;
}
.strokeColor .i9 {
  background: #cccc00;
}
.strokeColor input {
  width: 35px;
  height: 35px;
  margin-top: 10px;
}
.canvasFather {
  background-color: #0473fe;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 50px;
  position: relative;
}
#clear {
  position: absolute;
  right: 30px;
  top: 5px;
  /* float: right; */
  color: #ffffff;
  display: flex;
  justify-content: center;
}
#canvas {
  background: #000;
  cursor: default;
  margin-top: 60px;
  margin-left: 70px;
  border-radius: 10px;
}

.options {
  display: flex;
  justify-content: center;
  width: 668px;
  height: 120px;
  background-color: #ffffff;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 50px;
}
.optionClick {
  width: 120px;
  height: 100px;
  /* background-color: red; */
  text-align: center;
  margin: 0 auto;
  margin-top: 15px;
}
.optionsImg {
  width: 55px;
  height: 55px;
}
/* 画笔宽度 */
.strokeWidth {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 15px;
  top: 60px;
  /* display: none; */
}
.strokeWidthIcon2 {
  display: flex;
  flex-direction: column;
}
.strokeWidthIcon2 img {
  margin-bottom: 20px;
}
/* 画笔颜色 */
.strokeColor {
  position: absolute;
  left: 15px;
  top: 60px;
  display: none;
}
.strokeColor div {
  display: flex;
  flex-direction: column;
}
.strokeColor div input {
  margin-bottom: 15px;
}
/* 橡皮宽度 */
.strokeEraser {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 15px;
  top: 60px;
  display: none;
}
.strokeEraserIcon2 {
  display: flex;
  flex-direction: column;
}
.strokeEraserIcon2 img {
  margin-bottom: 20px;
}
</style>
